<template>
  <div class="page cancelVerifi-list">
    <mt-datetime-picker
      v-if="startPickerVisible"
      ref="startPicker"
      class="date-timer-picker"
      type="date"
      v-model="startDate"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      confirmText="下一步"
      @confirm="endPicker"
      @cancel="cancelPicker"
      :startDate="startDateScope"
      :endDate="endDateScope"
    ></mt-datetime-picker>
    <mt-datetime-picker
      v-if="endPickerVisible"
      ref="endPicker"
      type="date"
      class="date-timer-picker"
      v-model="endDate"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      :startDate="startDateScope2"
      :endDate="endDateScope"
      @confirm="dateChoice"
      @cancel="cancelPicker"
    ></mt-datetime-picker>
    <StoreChoice
      ref="StoreChoice"
      :current="[]"
      :multipleChoice="false"
      @listenToStoreSelect="getSelectStoreValue"
      :hasTotal="true"
      reqUrl="/newapp/shop/getMarketShopSelect.do"
    />
    <div class="scroll-view">
      <customHeader middleTitle="核销记录" @leftCallBack="handleBack" />
      <ul class="filter-box">
        <li @click="handleClickSelectStore">
          <span>门店：{{storeName}}</span>
          <i v-if="roleInfo.manyShopFlag" class="zhk-list_rarrow"></i>
        </li>
        <li @click="startPicker">
          <span>时间：{{formateDate(startDate)}} 至 {{formateDate(endDate)}}</span>

          <i class="zhk-list_rarrow"></i>
        </li>
      </ul>
      <ul class="tab-bar">
        <li
          v-for="(qType,index) in qTypeList"
          :class="{active:currQType==qType.value}"
          :key="index"
          @click="handleQTypeChange(qType)"
        >
          <span>{{qType.label}}</span>
        </li>
      </ul>
      <div class="page-body">
        <no-data msg="没有符合条件的商品" v-if="list.length==0"></no-data>
        <ul
          class="list-box"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="30"
        >
          <li v-for="(item,index) in list" :key="index" @click="linkToDetails(item.verifyId)">
            <div class="top">
              <img
                class="left"
                :src="item['goodsSalesImage']?imgUrlFormate(item['goodsSalesImage']):''"
              />
              <div class="right">
                <div class="goods-name">{{item.goodsSalesName}}</div>
                <div class="date">{{formateDateTime(item.createTime)}}</div>
                <div class="count">核销份数：{{item.verifyNums}}</div>
              </div>
            </div>
          </li>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&list.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import customHeader from '../../components/header/header';
import noData from "../../components/noData/noData";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import config from "../../base/profile/config.json";
import jsBridge from '../../tools/jsBridge.js';
import { Toast, DatetimePicker, Popup } from 'mint-ui';
Vue.component(Popup.name, Popup);
import moment from "moment";
export default {
  name: 'cancelVerifiList',
  data() {
    return {
      startDate: new Date(moment().millisecond(0).second(0).minute(0).hour(0)),
      endDate: new Date(),
      startPickerVisible: false,
      endPickerVisible: false,
      startDateScope: new Date(new Date() - 1000 * 60 * 60 * 24 * 180), //可选开始日期范围
      startDateScope2: new Date(), //可选结束日期范围
      endDateScope: new Date(),
      pageSize: 10,
      currentPage: 1,
      loading: false,
      noMore: false,
      qTypeList: [{ label: "全部", value: "" }, { label: "代金券", value: 1 }, { label: "套餐券", value: 2 }],
      currQType: "",
      list: [],
      storeName: "全部门店",
      roleInfo: {}
    };
  },
  methods: {
    handleBack() {
      if (this.$refs.StoreChoice && this.$refs.StoreChoice.popupVisible) {
        this.$refs.StoreChoice.back();
      } else {

        if (String(this.$route.query.close) == 'true') {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    imgUrlFormate(url) {
      return CommonUtil.imgUrlFormate(url, config.previewUrlPrefix)
    },
    formateDate(date) {
      if (date) {
        return moment(date).format("YYYY-MM-DD");
      } else {
        return date;
      }
    },
    formateDateTime(date) {
      if (date) {
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return date;
      }
    },
    //日期选择展开
    startPicker() {
      this.startPickerVisible = true;
      this.endPickerVisible = true;
      this.endDateScope = new Date();
      this.$nextTick(() => {
        this.$refs.startPicker.open();
      });
    },
    //结束日期展开
    endPicker(e) {
      this.startDateScope2 = e;

      //日期选择范围为31天且不超过当前时间
      if (new Date().valueOf() - e.valueOf() > 31 * 24 * 3600 * 1000) {
        this.endDateScope = new Date(e.valueOf() + 31 * 24 * 3600 * 1000);
      } else {
        this.endDateScope = new Date();
      }

      this.$nextTick(() => {
        this.$refs.endPicker.open();
      });
    },
    //结束日期选择
    dateChoice(e) {
      this.startPickerVisible = false;
      this.endPickerVisible = false;
      this.currentPage = 1;
      this.getData();
    },
    //点取消关闭日期组件
    cancelPicker() {
      this.startPickerVisible = false;
      this.endPickerVisible = false;
    },
    handleClickSelectStore() {
      this.$refs.StoreChoice.popupShow();
    },
    getSelectStoreValue(value, storeName) {
      var shopId = value[0].selectKey;

      this.shopId = shopId == "all" ? [] : [shopId];
      this.storeName = storeName;
      this.currentPage = 1;
      this.getData();
    },
    handleQTypeChange(v) {
      if (v == this.currQType) {
        return;
      }
      this.currQType = v.value;
      this.currentPage = 1;
      this.getData();
    },

    //无限加载
    loadMore() {
      if (this.loading || this.noMore) {
        return;
      }
      this.getData();
    },
    getData() {
      const url = "/newapp/mall/board/queryGoodsVerificationRecord.do";
      const params = { shopIds: this.shopId ? this.shopId : [], startTime: this.startDate.valueOf(), endTime: this.endDate.valueOf(), currentPage: this.currentPage, pageSize: this.pageSize };
      if (this.currQType) {
        params["ticketType"] = this.currQType;
      }
      if (this.currentPage == 1) {
        this.list = [];
      }
      this.ajax({
        url: url,
        type: "post",
        data: params,
        controlLoading: false
      })
        .then(res => {
          this.loading = false;
          this.noMore = false;
          if (res.success) {
            const data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && data.dataList && data.dataList.length > 0) {
              this.list = this.list.concat(data.dataList);
              if (data.dataAllCount) {
                this.noMore = Math.ceil(data.dataAllCount / this.pageSize) === this.currentPage ? true : false;
              } else {
                this.noMore = true;
              }
              this.currentPage = this.currentPage + 1;
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.noMore = true;
        });
    },
    linkToDetails(id) {
      this.$router.push({ path: '/cancelVerifi/cancelVerifiList/details', query: { verifyId: id } });
    }
  },
  components: {
    customHeader,
    noData,
    StoreChoice,
  },
  created() {

    CommonUtil.getUserInfo().then(userInfo => {
      this.roleInfo = userInfo;
      if (!this.roleInfo.manyShopFlag) {
        this.shopId = [this.roleInfo.yzShopId];
        this.storeName = this.roleInfo.shopName;
      }
      if (this.$route.query['startDate']) {
        this.startDate = new Date(Number(this.$route.query['startDate']));
        this.endDate = new Date(Number(this.$route.query['endDate']));
        this.shopId = this.$route.query['shopId'] ? this.$route.query['shopId'] : null;
        this.storeName = this.$route.query['shopName'] ? this.$route.query['shopName'] : "全部门店";
      }
    });
  },
};
</script>
<style lang='scss' scoped>
@import "cancelVerifi";
</style>
